<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="CreateVoucher" name=fourth>
      <div>
        <el-form ref="Voucherform" :model="Voucherform" :rules="rules" label-width="150px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="seller account" prop="shopname">
                <el-input v-model="Voucherform.shopname" placeholder="please write seller account"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="voucher number" prop="number">
                <el-input v-model="Voucherform.number" placeholder="please write number"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="region" prop="region">
            <el-radio v-model="Voucherform.region" label="sg">sg</el-radio>
            <el-radio v-model="Voucherform.region" label="tw">tw</el-radio>
            <el-radio v-model="Voucherform.region" label="ph">ph</el-radio>
            <el-radio v-model="Voucherform.region" label="vn">vn</el-radio>
            <el-radio v-model="Voucherform.region" label="id">id</el-radio>
            <el-radio v-model="Voucherform.region" label="my">my</el-radio>
            <el-radio v-model="Voucherform.region" label="th">th</el-radio>
            <el-radio v-model="Voucherform.region" label="br">br</el-radio>
            <el-radio v-model="Voucherform.region" label="co">co</el-radio>
            <el-radio v-model="Voucherform.region" label="cl">cl</el-radio>
            <el-radio v-model="Voucherform.region" label="mx">mx</el-radio>
          </el-form-item>
          <el-form-item label="env" prop="env">
            <el-radio v-model="Voucherform.env" label="test">test</el-radio>
            <el-radio v-model="Voucherform.env" label="uat">uat</el-radio>
            <el-radio v-model="Voucherform.env" label="staging">staging</el-radio>
          </el-form-item>
          <el-form-item style="margin-top: 20px" align="center">
            <el-button type="primary" @click="CreateVoucher('Voucherform')">Create Voucher Now</el-button>
          </el-form-item>
        </el-form>
        <div v-if="showResultCard" v-loading="isLoadingResult">
          <result-pane :resultReturn="resultReturn"></result-pane>
        </div>
        <br>
      </div>
    </el-tab-pane>

    <el-tab-pane label="JoinMembership" name=first>
      <div>
        <el-form ref="JoinMemberform" :model="JoinMemberform" :rules="rules" label-width="150px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="buyer account" prop="buyername">
                <el-input v-model="JoinMemberform.buyername" placeholder="please write buyer account"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="seller account" prop="shopname">
                <el-input v-model="JoinMemberform.shopname" placeholder="please write seller account"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="region" prop="region">
            <el-radio v-model="JoinMemberform.region" label="sg">sg</el-radio>
            <el-radio v-model="JoinMemberform.region" label="tw">tw</el-radio>
            <el-radio v-model="JoinMemberform.region" label="ph">ph</el-radio>
            <el-radio v-model="JoinMemberform.region" label="vn">vn</el-radio>
            <el-radio v-model="JoinMemberform.region" label="id">id</el-radio>
            <el-radio v-model="JoinMemberform.region" label="my">my</el-radio>
            <el-radio v-model="JoinMemberform.region" label="th">th</el-radio>
            <el-radio v-model="JoinMemberform.region" label="br">br</el-radio>
            <el-radio v-model="JoinMemberform.region" label="co">co</el-radio>
            <el-radio v-model="JoinMemberform.region" label="cl">cl</el-radio>
            <el-radio v-model="JoinMemberform.region" label="mx">mx</el-radio>
          </el-form-item>
          <el-form-item label="env" prop="env">
            <el-radio v-model="JoinMemberform.env" label="test">test</el-radio>
            <el-radio v-model="JoinMemberform.env" label="uat">uat</el-radio>
            <el-radio v-model="JoinMemberform.env" label="staging">staging</el-radio>
          </el-form-item>
          <el-form-item style="margin-top: 20px" align="center">
            <el-button type="primary" @click="JoinMembership('JoinMemberform')">Join Member Now</el-button>
          </el-form-item>
        </el-form>
        <div v-if="showResultCard" v-loading="isLoadingResult">
          <result-pane :resultReturn="resultReturn"></result-pane>
        </div>
        <br>
      </div>
    </el-tab-pane>

    <el-tab-pane label="QuitMembership" name=second>
      <div>
        <el-form ref="QuitMemberform" :model="QuitMemberform" :rules="rules" label-width="150px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="buyer account" prop="buyername">
                <el-input v-model="QuitMemberform.buyername" placeholder="please write buyer account"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="seller account" prop="shopname">
                <el-input v-model="QuitMemberform.shopname" placeholder="please write seller account"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="region" prop="region">
            <el-radio v-model="QuitMemberform.region" label="sg">sg</el-radio>
            <el-radio v-model="QuitMemberform.region" label="tw">tw</el-radio>
            <el-radio v-model="QuitMemberform.region" label="ph">ph</el-radio>
            <el-radio v-model="QuitMemberform.region" label="vn">vn</el-radio>
            <el-radio v-model="QuitMemberform.region" label="id">id</el-radio>
            <el-radio v-model="QuitMemberform.region" label="my">my</el-radio>
            <el-radio v-model="QuitMemberform.region" label="th">th</el-radio>
            <el-radio v-model="QuitMemberform.region" label="br">br</el-radio>
            <el-radio v-model="QuitMemberform.region" label="co">co</el-radio>
            <el-radio v-model="QuitMemberform.region" label="cl">cl</el-radio>
            <el-radio v-model="QuitMemberform.region" label="mx">mx</el-radio>
          </el-form-item>
          <el-form-item label="env" prop="env">
            <el-radio v-model="QuitMemberform.env" label="test">test</el-radio>
            <el-radio v-model="QuitMemberform.env" label="uat">uat</el-radio>
            <el-radio v-model="QuitMemberform.env" label="staging">staging</el-radio>
          </el-form-item>
          <el-form-item style="margin-top: 20px" align="center">
            <el-button type="primary" @click="QuitMembership('QuitMemberform')">Quit Member Now</el-button>
          </el-form-item>
        </el-form>
        <div v-if="showResultCard" v-loading="isLoadingResult">
          <result-pane :resultReturn="resultReturn"></result-pane>
        </div>
        <br>
      </div>
    </el-tab-pane>

    <el-tab-pane label="updateProfilePhone" name=third>
      <div>
        <el-form ref="ProfilePhoneform" :model="ProfilePhoneform" :rules="rules" label-width="150px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="buyer account" prop="buyername">
                <el-input v-model="ProfilePhoneform.buyername" placeholder="please write buyer account"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="seller password" prop="shoppassword">
                <el-input v-model="ProfilePhoneform.pwd" placeholder="if password is123456/Pass1234/Shopee123,dont need write"></el-input>
              </el-form-item>
          </el-col>
          </el-row>
            <el-row>
            <el-col :span="10">
              <el-form-item label="buyer account" prop="buyername">
                <el-input v-model="ProfilePhoneform.phone" placeholder="please write buyer account"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="region" prop="region">
            <el-radio v-model="ProfilePhoneform.region" label="sg">sg</el-radio>
            <el-radio v-model="ProfilePhoneform.region" label="tw">tw</el-radio>
            <el-radio v-model="ProfilePhoneform.region" label="ph">ph</el-radio>
            <el-radio v-model="ProfilePhoneform.region" label="vn">vn</el-radio>
            <el-radio v-model="ProfilePhoneform.region" label="id">id</el-radio>
            <el-radio v-model="ProfilePhoneform.region" label="my">my</el-radio>
            <el-radio v-model="ProfilePhoneform.region" label="th">th</el-radio>
            <el-radio v-model="ProfilePhoneform.region" label="br">br</el-radio>
            <el-radio v-model="ProfilePhoneform.region" label="co">co</el-radio>
            <el-radio v-model="ProfilePhoneform.region" label="cl">cl</el-radio>
            <el-radio v-model="ProfilePhoneform.region" label="mx">mx</el-radio>
          </el-form-item>
          <el-form-item label="env" prop="env">
            <el-radio v-model="ProfilePhoneform.env" label="test">test</el-radio>
            <el-radio v-model="ProfilePhoneform.env" label="uat">uat</el-radio>
            <el-radio v-model="ProfilePhoneform.env" label="staging">staging</el-radio>
          </el-form-item>
          <el-form-item style="margin-top: 20px" align="center">
            <el-button type="primary" @click="UpdatePhone('ProfilePhoneform')">update phone Now</el-button>
          </el-form-item>
        </el-form>
        <div v-if="showResultCard" v-loading="isLoadingResult">
          <result-pane :resultReturn="resultReturn"></result-pane>
        </div>
        <br>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import ResultPane from './ResultPane'
  import JsonEditor from '../JsonEditor'
  import {api, postRequest} from "@/api/commit";
  export default {
    name: "MemberTools",
    data() {
      return {
        activeName: 'first',
        showItemCard: false,
        showResultCard: false,
        isLoadingResult: false,
        JoinMemberform: {
          buyername: '',
          shopname: '',
          region: '',
          env: '',
        },
        QuitMemberform: {
          buyername: '',
          shopname: '',
          region: '',
          env: '',
        },
        ProfilePhoneform: {
          buyername: '',
          pwd: '',
          region: '',
          env: '',
          phone: ''
        },
        Voucherform: {
          number: 3,
          shopname: '',
          region: 'sg',
          env: 'test',
        },
        rules: {
          buyername: [
            {required: true, message: 'buyername不能为空', trigger: 'blur'}
          ],
          shopname: [
            {required: true, message: 'shopname不能为空', trigger: 'blur'}
          ],
          region: [
            {required: true, message: 'region不能为空', trigger: 'blur'}
          ],
          env: [
            {required: true, message: 'env不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    components:{
      ResultPane,
      JsonEditor
    },
    methods: {
      JoinMembership(JoinMemberform) {
        this.$refs[JoinMemberform].validate((valid) => {
          this.resultReturn =''
          this.showResultCard = true
          this.isLoadingResult = true
          let params = Object.assign({}, this.JoinMemberform);
          postRequest(api['join_membership'], params).then((res)=>{
            this.resultReturn = res.resultReturn
            this.isLoadingResult = false
          },(error)=>{
            this.resultReturn = "请检查您的输入是不是有问题&依赖方报错俺也没办法"
            this.isLoadingResult = false
          })
        })
      },
      QuitMembership(QuitMemberform) {
        this.$refs[QuitMemberform].validate((valid) => {
          this.resultReturn =''
          this.showResultCard = true
          this.isLoadingResult = true
          let params = Object.assign({}, this.QuitMemberform);
          postRequest(api['quit_membership'], params).then((res)=>{
            this.resultReturn = res.resultReturn
            this.isLoadingResult = false
          },(error)=>{
            this.resultReturn = "请检查您的输入是不是有问题&依赖方报错俺也没办法"
            this.isLoadingResult = false
          })
        })
      },
      UpdatePhone(ProfilePhoneform) {
        this.$refs[ProfilePhoneform].validate((valid) => {
          this.resultReturn =''
          this.showResultCard = true
          this.isLoadingResult = true
          let params = Object.assign({}, this.ProfilePhoneform);
          postRequest(api['update_profile_phone_num'], params).then((res)=>{
            this.resultReturn = res.resultReturn
            this.isLoadingResult = false
          },(error)=>{
            this.resultReturn = "请检查您的输入是不是有问题&依赖方报错俺也没办法"
            this.isLoadingResult = false
          })
        })
      },
      CreateVoucher(Voucherform) {
        this.$refs[Voucherform].validate((valid) => {
          this.resultReturn =''
          this.showResultCard = true
          this.isLoadingResult = true
          let params = Object.assign({}, this.Voucherform);
          postRequest(api['create_voucher_mbs'], params).then((res)=>{
            this.resultReturn = res.resultReturn
            this.isLoadingResult = false
          },(error)=>{
            this.resultReturn = "请检查您的输入是不是有问题&依赖方报错俺也没办法"
            this.isLoadingResult = false
          })
        })
      }
    }
  }
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .box-card {
    margin-bottom: 30px;
  }

  .form_item_no_label >>> .el-form-item__content {
    margin-left: 0px !important;
  }
</style>

